<template>
    <van-sticky>
        <van-nav-bar title="全部订单" left-text="返回" left-arrow @click-left="onBack">
        </van-nav-bar>
    </van-sticky>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab v-for="(item, index) in statusList" :title="item.text" :name="item.value" :key="index">
        </van-tab>
    </van-tabs>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
        <!-- 加载列表 -->
        <van-list v-model:loading="loading" :finished="finished" :offset="10" :immediate-check="true"
            finished-text="没有更多了" @load="onLoad">
            <!-- 商品卡片 -->
            <van-card v-for="(item, key) in list" :title="item.info.products.name" :thumb="item.info.products.thumb_cdn"
                :num="item.info.pronum" :tag="item.status_text" @click-thumb="toProductInfo(item.info.proid)"
                :key="key">
                <template #title>
                    <div class="title">订单号：{{ item.code }}</div>
                </template>

                <!-- 卡片的插槽部分 -->
                <template #desc v-if="item.info.attrs">
                    <van-tag v-for="(attr, index) in JSON.parse(item.info.attrs)" :key="index" class="tag"
                        type="primary">{{ attr.value }}</van-tag>
                </template>
                <template #desc v-else>
                    <van-tag class="tag" type="danger">无规格数据</van-tag>
                </template>

                <template #tags>
                    <div class="price">下单时间：{{ item.createtime_text }}</div>
                </template>

                <template #price>
                    <div class="price">订单总价：￥{{ item.amount }}</div>
                </template>
                <template #footer>

                    <!-- status = 1 仅退款 -->
                    <van-button type="danger" size="small" v-if="item.status == '1'"
                        @click="OrderApply(item.id)">申请退款</van-button>

                    <!-- status = -1 -->
                    <van-button type="danger" size="small" v-if="item.status == '-1'">已提交申请，等待商家审核...</van-button>


                    <!-- status = 2 -->
                    <van-button type="success" size="small" v-if="item.status == '2'"
                        @click="OrderConfirm(item.id)">确认收货</van-button>
                    <van-button type="warning" size="small" v-if="item.status == '2'"
                        @click="ToExpress(item.id)">物流详情</van-button>
                    <van-button type="danger" size="small" v-if="item.status == '2'"
                        @click="onOrderApply(item.id)">申请退货退款</van-button>

                    <!-- status = -2 退货退款 -->
                    <van-button type="danger" size="small" v-if="item.status == '-2'"
                        @click="onYes(item.id)">已提交申请，等待商家审核...</van-button>

                    <!-- status = -3 -->
                    <van-button type="success" size="small" v-if="item.status == '-3'"
                        @click="ToBackAdd(item.id)">填写退货信息</van-button>

                    <!-- status = 3 已收货 -->
                    <van-button type="warning" size="small" v-if="item.status == '3'"
                        @click="onComment(item.id)">立即评价</van-button>

                    <van-button type="primary" size="small" @click="ToOrderInfo(item.id)">订单详情</van-button>

                    <!--<van-button type="primary" size="small">退货详情</van-button> -->
                </template>
            </van-card>
        </van-list>
    </van-pull-refresh>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = ref(proxy.$cookies.get('business') ?? {});
const active = ref(0);
const statusList = ref([
    { text: '全部', value: 0 },
    { text: '待发货', value: 1 },
    { text: '待收货', value: 2 },
    { text: '待评价', value: 3 },
    { text: '已完成', value: 4 },
    { text: '退货退款', value: -1 },
]);

//导航栏点击事件
const onClickTab = async (index) => {
    onRefresh();
}

//刷新操作
const refreshing = ref(false);
const list = ref([]);
const page = ref(1); //当前页面数
const listCount = ref(0); //订单个数
const onRefresh = () => {
    list.value = [];
    page.value = 1;
    finished.value = false;
    loading.value = true;

    setTimeout(onLoad, 1500);
};

//懒加载
const loading = ref(false);   //关闭懒加载状态
const finished = ref(false); //判断是否已下拉加载完成的状态,true完成，false没有
const onLoad = async () => {
    if (refreshing.value) {
        refreshing.value = false;
    }
    let params = {
        busid: business.value.id,
        page: page.value,
        status: active.value
    }

    let result = await proxy.$post({
        url: '/product/order/index',
        params
    })

    if (result.code === 1) {
        list.value = result.data.list;
        listCount.value = result.data.count;

        finished.value = false;
        loading.value = false;

        if (list.value.length === listCount.value) {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    } else {
        proxy.$showToast(result.msg);
        finished.value = true;
    }
}

//订单详情
const ToOrderInfo = async (orderid) => proxy.$router.push({ path: "/product/order/info", query: { orderid } });

//仅退货
const OrderApply = (orderid) => {
    proxy.$showConfirm({
        title: '确认收货',
        message: "是否确认收货"
    }).then(() => {
        btn(orderid, -2);
        onRefresh();
    }).catch((err) => {

    });;
};

//申请退款
const onOrderApply = async (orderid) => {

}

//退款提交申请，商家核实
const onYes = (orderid) => proxy.$router.push({ path: "/product/order/process", query: { orderid } });
//物流详情
const ToExpress = (orderid) => proxy.$router.push({ path: '/product/order/express', query: { orderid } })

//确认收货
const OrderConfirm = (orderid) => {
    proxy.$showConfirm({
        title: '确认收货',
        message: "是否确认收货"
    }).then(async () => {
        let data = {
            orderid: orderid,
            busid: business.value.id,
            status: 3
        }

        let result = await proxy.$post({
            url: 'product/order/confirm',
            params: data
        })

        if (result.code === 1) {
            proxy.$NotifySuccess({ msg: "收货成功" });
            onRefresh();
            return false;
        } else {
            proxy.$NotifyWarn({
                msg: "收货失败"
            });
            return false;
        }
    }).catch((err) => {

    });;
}

//立即评价
const onComment = (orderid) => proxy.$router.push({ path: "/product/order/comment", query: { orderid } });

//公共方法，点击按钮事件
const btn = async (item, status) => {
    let data = {
        orderid: item,
        busid: business.value.id,
        status: status
    }

    let result = await proxy.$post({
        url: 'product/order/confirm',
        params: data
    });

    if (result.code === 1) {
        proxy.$NotifySuccess("正在退款中");
        return false;
    } else {
        proxy.$NotifyWarn("退款失败");
        return false;
    }
}
const onBack = () => proxy.$router.push('/business/base/index');
</script>